<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>#{get 'title' /}</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link rel="stylesheet" type="text/css" media="screen" href="/public/stylesheets/generic.css"/>
        <link rel="stylesheet" type="text/css" media="screen" href="/public/stylesheets/requirement.css"/>
		<link rel="shortcut icon" href="@{'public/images/favicon.ico'}" type="image/x-icon"/> 
        #{get 'moreStyles' /}
        <script src="@{'/public/javascripts/jquery-1.4.min.js'}" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="@{'public/javascripts/jquery-ui-1.8.custom.min.js'}"> </script>
		<script type="text/javascript" src="@{'public/javascripts/timepicker.js'}"> </script>
        <script src="@{'/public/javascripts/date.js'}" type="text/javascript" charset="utf-8"></script>
       	<script src="@{'/public/javascripts/md5.js'}" type="text/javascript"charset="utf-8"></script>
       	<script src="@{'/public/javascripts/more.js'}" type="text/javascript"charset="utf-8"></script>
		<script type="text/javascript" src="/public/javascripts/jquery.gritter.min.js"></script>
        <script src="@{'/public/javascripts/jquery.bar.js'}" type="text/javascript" charset="utf-8"></script>
        <script src="@{'/public/javascripts/requirements.js'}" type="text/javascript" charset="utf-8"></script>
        <script src="@{'/public/javascripts/smartsoft.filter.js'}" type="text/javascript" charset="utf-8"></script>
        <script src="@{'/public/javascripts/functions.js'}" type="text/javascript" charset="utf-8"></script>
		<script src="@{'/public/javascripts/collaborative.js'}" type="text/javascript" charset="utf-8"></script>
#{if connected}
		<script src="@{'/public/javascripts/plugins/jcalendar.js'}" type="text/javascript" charset="utf-8"></script>
#{/if}
        <script  type="text/javascript" src="@{'/public/javascripts/drag.js/'}"  ></script>
       #{get 'moreScripts' /}
        <script type="text/javascript">

		function signIn(id)
		{
			$.post('/ChatSystem/enterChat',{id:id});
		}
		
		function signOut(id)
		{
			$.post('/ChatSystem/leaveChat',{id:id});
		}
		
		#{if connected}		
		var CONNECTED_ID = ${connected.id};
		// Retrieve new messages
		function getMessages(id,cId) {
			$.getJSON('/ChatSystem/newMessages',{id:cId}, function(messages) {
				$(messages).each(function() {
					display(id,this);
				});
				setTimeout('getMessages('+id+','+cId+');', 600);
			});
		}
		// Retrieve all messages
		function retrieve(id,cId) {
			$.getJSON('/ChatSystem/retrieveSinceLastLogin',{userId:${connected.id},roomId:cId}, function(messages) {
				$(messages).each(function() {
					display(id,this);
				});
			});
		}

		function display(id,message)
		{
			$('#threader_'+id).append(tmpl('message_tmpl', {message: message}));
			var obj = document.getElementById('thread_'+id);
			obj.scrollTop = obj.scrollHeight;
		}
		#{/if}
               
       		$(function(){
				doOnLoad();
				#{get 'onLoad' /}
				#{if connected}
				setTimeout('ping();', 2000);
   			    #{/if}
       		});

       function make(el,me)
       {
    	   var $marginLefty = $('#'+el);
    	   $marginLefty.animate({
        	   marginRight: parseInt($marginLefty.css('marginRight'),10) == 0 ?$marginLefty.outerWidth() :0
           });
			// enty? o.O
           var $ana = $(me).parent();
           $ana.animate({
        	   right: parseInt($ana.css('right'),10) == 0 ? -21 : 0
           },
           function(){
        	   $(me).parent().toggleClass('notch2');
           });

           
       }
       function normalShow(url)
       {
    	   $('#normal').load(url);
    	   $('#normal').show();
    	   $('#workspaces').hide();
    	   

       }

		function addProjectToSearchBar(name, id) {
			$('#projects_my_current_projects').append('<div id="project-search-result-'+id+'"><a onclick="showProjectWorkspace('+id+')">'+name+'</a></div>')
		}
        </script>
</head>
<body>
<div id="getOverlay">
<div style="display:table"class="transparentOverlay">
<div id="overlayLoading" style="text-align:center;vertical-align:middle;display:table-cell">
<img src="/public/images/loading.gif" alt="Loading"/></div>
	
</div>
<div id ="overlayContent">
	<div id="overlayContentHolder">
		
		<iframe id="theLoadedContent" name="theLoadedContent" style="display:none;">
	</iframe>
	</div>
</div>
</div>
<table id="mainTable">
#{if connected}
<tr><td style="height:10px">

<div class="topBar" id="project-tabs">
	<!--a class="aDIV topCornersRounded" href="#" onclick="normalShow('/ #elContent')" style="color: #E5A1A5; float:left;" title="Go home">Home</a-->
#{if connected?.isAdmin}
	<!--a class="aDIV topCornersRounded" href="#" onclick="normalShow('/admin')"style="color: #E5A1A5; float:left;" title="View the admin panel">Admin Panel</a-->
#{/if}
	<!--a class="aDIV topCornersRounded" href="#"  onclick="normalShow('@{About.index}')" title="read aboout SmartSoft?">About Us</a--> 

		<a class="aDIV topCornersRounded " href="#" onclick="$('#top_header_projects_pane').slideToggle()" style="width: 120px !important" title="Start here">Main Navigation</a>
</div>	
<div id="top_header_projects_pane" class="hidden bottomCornersRounded">
	<input type="text" value="" id="project_search_text" onkeyup="search_projects()"/>
	<h3>Your Projects</h3>
	<div id="projects_my_current_projects">#{list items:connected?.projects, as:'project'}
		#{if !project.deleted}
			<div id="project-search-result-${project.id}"><a onclick="showProjectWorkspace(${project.id})">${project.name}</a></div>
		#{/if}
	#{/list}</div>
	<h3 id="search_results_h3">Search results</h3>
	<div id="projects_search_results"></div>
	#{if connected?.isAdmin}
			<div id="add-new-project-link"><a href="#" onclick="overlayOpen('/admin/projects/new'); $('#top_header_projects_pane').slideUp()" style=""><img src="/public/images/famfam/add.png" alt="[+]"/> Create New Project</a></div>
	#{/if}
	#{else}
			<div id="add-new-project-link"><a href="#" onclick="overlayOpen('/admin/projects/new'); $('#top_header_projects_pane').slideUp()" style=""><img src="/public/images/famfam/add.png" alt="[+]"/> Request New Project</a></div>
	#{/else}
	
	#{if connected?.isAdmin}
		<h3>ACP Link</h3>
		<div id="acp_link"><a onclick="showProjectWorkspace(-1);">Admin CP</a></div>
	#{/if}
</div>
<div class="topper">
						<div class="left">
						
							Hello <span id="username-in-topbar">${connected.name}</span>! <!--&nbsp;&nbsp;|&nbsp;&nbsp;
							<a href="#" onclick="smartShow('/show/user?id=${controllers.Security.getConnected().id}')">Profile</a>-->
						
						</div>
						
							
							<div class="right">
								<a href="/sessions/logout" title="Logout from the system">Logout</a>
							</div>
							<br style="clear:both"/>
						</div></td></tr>

<tr><td style="height: 100%; vertical-align: top;">
<div id="workspaces" style="display:none">
						
#{if true}
<!-- hide for the moment -->
<div class="sideHolder">
	<!-- Notifications Start -->
	<div class="notch"style="top: 190px;">
		<a href="#" title="View your notifications?"onclick="make('sideNoti',this);$('#sideNoti').load('/Application/showNotifications?page=1')">
		<img src="/public/images/myNotifications.png" alt="[Notifications]"/>
		</a>
	</div>
	<div id="sideNoti" class="siderC">
		<div style="display:table;width:100%;height:100%;">
<div id="overlayLoading" style="text-align:center;vertical-align:middle;display:table-cell">
<img src="/public/images/loading.gif" alt="Loading"/></div>
	</div>
	<!-- Notifications End -->
</div></div>
<div class="sideHolder">
	<!-- My events Start -->
	<div class="notch"style="top: 100px;">
		<a href="#" title="View your events?" onclick="make('sideEvent',this);$('#sideEvent').load('/Application/showEvents')">
		<img src="/public/images/myEvents.png" alt="[Events]"/>
		</a>
	</div>
	<div id="sideEvent" class="siderC">
		<div style="display:table;width:100%;height:100%;">
<div id="overlayLoading" style="text-align:center;vertical-align:middle;display:table-cell">
<img src="/public/images/loading.gif" alt="Loading"/></div>
	</div>
	</div>
	<!-- My events End -->
</div>
<div class="sideHolder">
	<!-- MyTasks Start -->
	<div class="notch"style="top: 345px;">
		<a href="#" title = "Check your ivitations" onclick="make('sideIn',this);$('#sideIn').load('/Invites/showInvitations')">
		<img src="/public/images/myInvitations.png" alt="[Invitations]"/></a>
	</div>
	<div id="sideIn" class="siderC">
		<div style="display:table;width:100%;height:100%;">
<div id="overlayLoading" style="text-align:center;vertical-align:middle;display:table-cell">
<img src="/public/images/loading.gif" alt="Loading"/></div>
	</div>
	</div>
	<!-- Invitations End -->
</div>
#{/if}
	<div id="workspace-help">
		This is your projects workspace. You could click on the links in the top header to show boxes of respective content. You could then browse through by clicking links in the boxes, or, for more focus on what you need most, by dragging the links outside to create new boxes of that content separately. <strong>For more information click the Help link near the top</strong>
	</div>
	<div id="acp-workspace-help">
		This is the admin control panel. You could change system settings, approve project requests, and manage defaults for newly created projects.
	</div>
</div>
#{/if}#{ifnot connected}
<tr><td style="height: 100%; vertical-align: top;">#{/ifnot}
<div id="normal">
#{doLayout/}
</div></td>
</tr><tr><td style="height:10px">
#{if connected}
	<!-- DO NOT REMOVE THIS! Hide it (using CSS), but do not remove it! -->
	<div id="onlineUsers">Online users: <span id="online_users_list"></span></div>#{/if}
	<div id="footer" style="background-color:#366A8A;padding:10px 1%;margin:2px 1%;;width:96%" class="allCornersRounded" ><center><font color="white">Powered by <a style="color:#FFFFFF" href="http://code.google.com/p/ss-scrum-tool/" target="_blank">SmarterScrum</a> v0.1beta. We welcome and appreciate your <a style="color:#FFFFFF" href="#" onclick="overlayOpen('/feedbacks');">feedback</a>.</font></center></div>
</td></tr>
</table>
			#{ifErrors}
			<script type="text/javascript">
				$(document).ready(function(){
					$.bar({
						message : '${errors}'
					});
				})
			</script>
			#{/ifErrors}
			#{if flash.error}
			<script type="text/javascript">
			$(document).ready(function(){
				$.bar({
					message : '&{flash.error}'
				});
			})
			</script>
			#{/if}
			#{if error}
			<script type="text/javascript">
			$(document).ready(function(){
				$.bar({
					message : '&{error}'
				});
			})
			</script>
			#{/if}
			
			#{if flash.success}
			<script type="text/javascript">
			$(document).ready(function(){
				$.bar({
					message : '&{flash.success}'
				});
			})
			</script>
			#{/if}
</body>
</html>